<template>
  <div>

    <el-container>
      <!--      高德-->
      <el-aside width="800px">
        <div id="container"></div>
        <div id="panel"></div>
      </el-aside>
      <!--      表单-->
      <el-main>
        <el-form v-model="transportLineForm" label-width="120px">
          <el-form-item label="线路编号:">
            <el-input v-model="transportLineForm.lineNumber" placeholder="请输入线路编号"/>
          </el-form-item>

          <el-form-item label="线路名称:">
            <el-input v-model="transportLineForm.name" placeholder="请输入线路编号"/>
          </el-form-item>
          <el-form-item label="线路类型:">
            <el-select v-model="transportLineForm.transportLineTypeId" placeholder="请选择">
              <el-option v-for="(item,index) in transportLineTypeData" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item label="起始地机构:">
            <el-select v-model="startName" placeholder="请选择" @change="startChange" value-key="id">
              <el-option v-for="(item,index) in coreOrgData" :label="item.name" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item label="目的地机构:">
            <el-select v-model="endName" placeholder="请选择" value-key="id" @change="endChange">
              <el-option v-for="(item,index) in coreOrgData" :label="item.name" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item label="距离:">
            <strong><b style="color: red">{{ transportLineForm.distance }}公里</b></strong>
          </el-form-item>

          <el-form-item label="成本(元):">
            <el-input v-model="transportLineForm.cost" placeholder="请输入成本"/>
          </el-form-item>

          <el-form-item label="预计时间:">
            <strong><b style="color: red">{{ transportLineForm.estimatedTime }}分钟</b></strong>
          </el-form-item>

          <el-form-item label="状态:">
            <el-radio v-model="transportLineForm.status" :label="1" border>正常</el-radio>
            <el-radio v-model="transportLineForm.status" :label="0" border>禁用</el-radio>
          </el-form-item>
          <el-form-item label="操作:">
            <el-button @click="addTransportLine" type="primary">添加</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import transportLineType from '@/api/base/transportLineType/index'
import transportLine from '@/api/base/transportLine/index'
import coreOrg from '@/api/base/coreOrg/index'
import AMap from 'AMap'

export default {
  name: 'add',
  data() {
    return {
      transportLineTypeData: [],
      coreOrgData: [],
      startName: '',
      endName: '',
      transportLineForm: {
        name: '',
        lineNumber: '',
        agencyId: '',
        transportLineTypeId: '',
        startAgencyId: '',
        endAgencyId: '',
        distance: '',
        cost: '',
        estimatedTime: '',
        status: 1
      },
      //高德地图
      map: null,
      drivingOption: null,
      // 构造路线导航类
      driving: null,
      //起始经纬度
      startLng: '',
      startLat: '',
      //结束经纬度
      endLng: '',
      endLat: ''
    }
  },
  methods: {
    addTransportLine() {
      this.transportLineForm.agencyId = this.transportLineForm.startAgencyId
      transportLine.addTransportLine(this.transportLineForm).then(data => {
        this.$message({
          type: 'success',
          message: '添加线路成功!',
          showClose: true
        })
        this.$router.push({ path: '/transport-index' })
      })
    },
    //高德地图
    showMap() {
      this.map = new AMap.Map('container', {
        center: [116.397559, 39.89621],
        zoom: 14
      })
      this.drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        province: '京', // 车牌省份的汉字缩写
        map: this.map,
        panel: 'panel'
      }
      if (this.driving) {
        this.driving.clear()
      }
      this.driving = new AMap.Driving(this.drivingOption)
      // 根据起终点经纬度规划驾车导航路线
      this.driving.search(new AMap.LngLat(this.startLng, this.startLat), new AMap.LngLat(this.endLng, this.endLat), this.amapStaus)
    },
    amapStaus(status, result) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        this.transportLineForm.distance = (result.routes[0].distance / 1000)
        this.transportLineForm.estimatedTime = (result.routes[0].time / 60)
        console.log('', result)
        console.log('绘制驾车路线完成')
      } else {
        console.log('获取驾车数据失败：' + result)
      }
    },
    startChange(val) {

      this.transportLineForm.startAgencyId = val.id
      this.startLat = val.latitude
      this.startLng = val.longitude
      if ((this.endLng !== null && this.endLng !== '') && (this.endLat !== null && this.endLat !== '')) {
        this.showMap()
      }
    },
    endChange(val) {

      this.transportLineForm.endAgencyId = val.id
      this.endLat = val.latitude
      this.endLng = val.longitude
      if ((this.startLng !== null && this.startLng !== '') && (this.startLat !== null && this.startLat !== '')) {
        this.showMap()
      }
    },
    findAllCoreOrg() {
      coreOrg.queryAll().then(data => {
        this.coreOrgData = data.data
      })
    },
    findAllTransportLineType() {
      transportLineType.getTransportLineTypeAll().then(data => {
        this.transportLineTypeData = data.data

      })
    }
  }, mounted() {
    this.findAllCoreOrg()
    this.findAllTransportLineType()

  }
}
</script>

<style scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 500px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
